<template>
  <!-- 新建编辑成功案例组件 -->
  <div class="form-success-case">
    <!-- 添加按钮 Start -->
    <el-button
      class="add-subform-btn"
      icon="el-icon-plus"
      @click="(visible = true); handleClickAdd()">添加
    </el-button>
    <!-- 添加按钮 End -->

    <!-- 成功案例表单表格 S -->
    <el-table
      v-table-style
      :data="dataList"
      header-row-class-name="common-list-table-header__v2"
      border
    >
      <el-table-column
        v-for="(column, index) in subFields"
        :key="`${column.field}_${index}`"
        :label="column.displayName"
        :min-width="column.minWidth || '108px'"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <template v-if="column.formType === 'attachment'">
            <el-button
              v-if="scope.row[column.fieldName] && scope.row[column.fieldName].length"
              type="text"
              size="small"
              @click="searchAttachment(scope.row[column.fieldName])">
              查看
            </el-button>
          </template>
          <template v-else>
            {{
              $formatFormField(column, scope.row)
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClickEdit(scope.row, scope.$index)">
            编辑
          </el-button>
          <el-button
            type="text"
            size="small"
            @click="handleClickDelete(scope.$index)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 成功案例表单表格 E -->

    <!-- 字表单弹框 S -->
    <base-modal
      :show.sync="visible"
      :title="title"
      width="600px"
      append-to-body
    >
      <div class="success-case-model">
        <form-builder
          v-if="visible"
          ref="form"
          :fields="subFields"
          :value="form"
          @update="update"
        >
        </form-builder>
      </div>

      <div slot="footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickSubmit">提 交</el-button>
      </div>
    </base-modal>
    <!-- 字表单弹框 E -->

    <!-- 附件查看 S -->
    <base-modal
      :show.sync="visibleAttc"
      title="查看"
      width="600px"
      append-to-body
    >
      <div class="form-view-row-content base-file__preview pad-20">
        <base-file-item v-for="(a, index) in attachments" :Source="attachments" :key="index" :file="a" readonly/>
      </div>
    </base-modal>
    <!-- 附件查看 E -->
  </div>
</template>

<script>
/* mixin */
import FormMixin from '@src/component/form/mixin/form';
/* util */
import * as FormUtil from '@src/component/form/util';

export default {
  name: 'form-suc-case',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      dataList: [], // 表格成功案例的数据
      visible: false,
      visibleAttc: false,
      form: {},
      title: '添加成功案例',
      attachments: [], // 附件
      action: 'create',
      currentSubIndex: null,
    };
  },
  computed: {
    subFields() {
      return this.field?.subFormFieldList.sort((a, b) => a.orderId - b.orderId) || [];
    },
  },
  watch: {
    value(newValue) {
      this.dataList = newValue || [];
    },
  },
  methods: {
    // 点击添加
    handleClickAdd() {
      this.action = 'create'
      this.title = `添加${this.field?.displayName}`
      this.form = FormUtil.initialize(this.subFields, {});
    },
    // 编辑
    handleClickEdit(value, index) {
      this.action = 'edit';
      this.currentSubIndex = index;
      this.form = FormUtil.initialize(this.subFields, value);
      this.title = `编辑${this.field?.displayName}`
      this.visible = true;
    },
    // 删除
    handleClickDelete(index) {
      this.dataList.splice(index, 1);
      this.inputForValue(this.dataList);
    },
    // 更新表单数据
    update({ field, newValue }) {
      let { fieldName } = field;
      this.$set(this.form, fieldName, newValue);
    },
    // 点击查看附件
    searchAttachment(value) {
      this.visibleAttc = true;
      this.attachments = value
    },
    // 提交
    async handleClickSubmit() {
      // 校验表单必填项
      const validateRes = await this.$refs.form.validate(false);
      if (!validateRes) return;

      if(this.action === 'create') {
        // 新增表单
        this.dataList.push(this.form);
      } else if (this.action === 'edit') {
        // 编辑表单
        this.$set(
            this.dataList,
            this.currentSubIndex,
            this.form
        );
      }

      this.inputForValue(this.dataList);
      this.visible = false;
      this.form = {};
    },
  },
};
</script>
<style lang="scss" scoped>
.form-success-case {
  .add-subform-btn {
    color: $color-primary;
    border-color: #b8eded;
    background-color: $color-primary-light-1;
    margin-bottom: 12px;
    &:hover {
      background: $color-primary;
      border-color: $color-primary;
      color: #fff;
    }
  }
}
.success-case-model {
 // min-height: 360px;
  padding: 5px;
  ::v-deep .form-item label {
    width: 120px;
  }
}
</style>
